<!DOCTYPE html>
<html>
<head>
<title>Energy Level Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="420"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Style settings
ctx.strokeStyle = "black";
ctx.fillStyle = "black";
ctx.lineWidth = 1;

// Draw bounding box
ctx.strokeRect(50, 50, 500, 300);

// Set line and font styles for the diagram elements
ctx.lineWidth = 2.5;
ctx.font = "bold 24px 'Courier New', monospace";
ctx.textAlign = "left";
ctx.textBaseline = "middle";

// --- Draw n=2 level ---
ctx.fillText("n = 2", 80, 120);
// Three line segments for n=2
ctx.beginPath();
ctx.moveTo(180, 120);
ctx.lineTo(290, 120);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(320, 120);
ctx.lineTo(430, 120);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(460, 120);
ctx.lineTo(540, 120);
ctx.stroke();

// --- Draw n=1 level ---
ctx.fillText("n = 1", 80, 280);
// Line for n=1
ctx.beginPath();
ctx.moveTo(180, 280);
ctx.lineTo(330, 280);
ctx.stroke();

// --- Draw Figure Caption ---
ctx.lineWidth = 1;
ctx.font = "20px 'Times New Roman', serif";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillText("Fig. 1.14", 300, 365);

</script>
</body>
</html>